<template>
    <div class="view-container">
        <Empty v-if="proCollection.length==0">没有新消息</Empty>
        <div v-if="proCollection.length!==0" v-loading="loading">
            <el-table
                    ref="multipleTable"
                    :data="proCollection"
                    border
                    tooltip-effect="dark"
                    style="min-width: 1078px;">
                <el-table-column prop="goodsName"
                                 label="商品名称">
                </el-table-column>
                <el-table-column
                        label="收藏人数"
                        prop="collectNum" sortable>
                    <template slot-scope="scope">
                        <el-button type="text" @click="setId(scope.row.goodsId)">{{scope.row.collectNum}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 24px;text-align: center;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalLists">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {getProductsCollected} from '@/api/usersList';
    import Empty from '@/components/Empty'

    export default {
        name: 'customerCollectGoods',
        components: {
            'Empty': Empty
        },
        data() {
            return {
                loading: false,
                proCollection: [],
                currentPage: 1,
                pageSize: 5,
                totalLists: 0
            }
        },
        mounted() {
            this.currentPage = 1;
            this.pageSize = 5;
            this.getCollectedProLists();
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.getCollectedProLists();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getCollectedProLists()
            },
            getCollectedProLists() {
                this.loading = true;
                let data = {
                    "page": this.currentPage,
                    "pageSize": this.pageSize,
                    "desc": true
                };
                getProductsCollected(data)
                    .then((resp) => {
                        console.log(resp);
                        this.proCollection = resp.data.list || [];
                        this.totalLists = resp.data.total || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 300);
                    }).catch((err) => {
                    setTimeout(() => {
                        this.loading = false;
                    }, 300);
                })
            },
            setId(goodsId) {
                this.$router.push({name: 'customerCollectGoodsInfo', query: {id: goodsId}})
            }
        }
    }
</script>

<style lang="less" scoped>

</style>
